import React, { Component } from 'react';
import {connect} from "react-redux";
import $ from "jquery";
import {Link} from "react-router";


import {fetchProductsList} from "../actions/actions_getProducts";
import {actions_getProducts} from "../actions/actions_addCarts";

const mapStateToProps=(state)=>{  
    return {
        products:state.products,
        carts:state.carts
    }
}

class Home extends Component{   

    changePage(page){
        $("html").scrollTop(850);  //跳转       
        this.props.fetchProductsList(page)
    }

    addCart(id){
         this.props.actions_getProducts(id);
    }

    render(){
            console.log(this.props.carts);
            var productsArr=[];
            var pageArr=[];
            if(this.props.products.rows !==undefined){
                var productsItem=this.props.products.rows;
                var total=this.props.products.total;
                var page=this.props.products.page;
                var pages=this.props.products.pages;

                for(let i=0,len=productsItem.length;i<len;i++){
                    productsArr.push(
                        <div className="col-md-4" key={i}>
                                <dl>
                                    <dt><img src={productsItem[i].url} /></dt>
                                    <dd>
                                            <p>{productsItem[i].title}</p>                                            
                                            <div className="row">
                                                    <div className="col-md-8">￥{productsItem[i].nowprice}</div>
                                                    <div className="col-md-4 price"><del>￥{productsItem[i].price}</del></div>
                                            </div>                                            
                                            <button type="button" className="btn btn-danger" onClick={this.addCart.bind(this,productsItem[i]._id)}><Link style={{color:"#fff"}} to="/carts">加入购物车</Link></button>
                                    </dd>
                                </dl>
                        </div>
                    );
                }

                for(let i=0;i<pages;i++){
                    pageArr.push(
                        <li  key={i}><a href="javascript:;" onClick={ this.changePage.bind(this,i+1) }>{i+1}<span className="sr-only">(current)</span></a></li>
                    );
                }

            }


        return (            
                <div className="container">
                    <div className="jumbotron">
                        <div className="row">
                                  {productsArr}                            
                        </div>       

                        <nav aria-label="...">
                        <div className="row">
                                <div className="col-md-4"></div>
                                <div className="col-md-4">
                                        <ul className="pagination">
                                            <li className="disabled"><a href="javascript:;" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
                                            {pageArr}
                                            <li className="disabled"><a href="javascript:;" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
                                        </ul>
                                </div>
                                <div className="col-md-4"></div>
                        </div>
                        </nav>

                    </div>
                </div> 
        )        
    }

    componentDidMount(){
        this.props.fetchProductsList();
    }
}


module.exports=connect(mapStateToProps,{fetchProductsList,actions_getProducts})(Home);